<template>
  <div class="flex flex-col page-main dark:bg-black">
    <div class="title h-16 w-full mb-2  flex p-1.5 items-center bg-white dark:bg-gray-900">
      <div class="pl-2.5 pr-2.5 font-semibold text-lg dark:bg-gray-900">
        <span>{{props.title}}</span>
      </div>
      <div class="flex flex-row-reverse flex-1 dark:bg-gray-900">
        <slot name="button"></slot>
      </div>
    </div>
    <div class="flex-1  flex">
      <div class="h-full mr-2.5 bg-white dark:bg-gray-900 flex flex-col" :style="{width: treeWidth+'px'}">
        <div class="h-10 text-base text-gray-500 border-b pr-2.5 pl-2.5 flex items-center font-medium">
          {{props.treeTitle}}
        </div>
        <div v-loading="props.loading" class="p-2.5">
          <slot name="tree"></slot>
        </div>

      </div>
      <div class="flex-1 h-full body bg-white dark:bg-gray-900">
        <div class="flex w-full">
          <div class="query">
            <slot name="query"></slot>
          </div>
          <slot v-if="slots.queryButton" name="queryButton"></slot>
          <div v-else class="queryButton">
            <el-space wrap 	alignment="flex-start">
              <el-button v-buttonBlur type="primary" @click="query" >查询</el-button>
              <el-button v-buttonBlur @click="reset">重置</el-button>
            </el-space>
          </div>
        </div>
        <div v-loading="props.loading" class="flex-1 h-0">
          <slot name="table"></slot>
        </div>
        <div v-if="props.isPage" class="h-10">
          <slot name="page"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSlots } from 'vue'
const  emit = defineEmits(["query","reset"])
const props = defineProps({
  title: String,
  treeTitle: String,
  isPage: {
    type: Boolean,
    default: true
  },
  treeWidth: {
    type: Number,
    default: 300
  },
  loading: {
    type: Boolean,
    default: false
  }
})
const slots = useSlots()
const query = () => {
  emit("query")
}
const reset = () => {
  emit("reset")
}
</script>

<style scoped lang="scss">
.title{
  .button{

  }
}
.body{
  padding: 20px;
  display: flex;
  flex: 1;
  width: 100%;
  flex-direction: column;
  .query{
    flex: 1;
    width: 100%;
    display: flex;
  }
  .queryButton{
    display: flex;
    flex-direction: row-reverse;
    width: 200px;
  }
}
</style>